<script setup lang='tsx' name='ChatHistoryRight'>
type Props = {
    nickName: string,
    avatar?: string,
    msg?: string,
}
const props = withDefaults(defineProps<Props>(), {
}
)

</script>

<template>
    <div class='chat-history-item-container'>
        <el-avatar :src="props.avatar" mt-8px> {{ props.avatar ? '' : props.nickName }} </el-avatar>
        <div class="chat-item-right" mr-16px>
            <div class="chat-msg" mt-10px>
                <i class="triangle"></i>
                {{ props.msg }}
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.chat-history-item-container {
    display: flex;
    flex-direction: row-reverse;
    margin: 10px 0;

    .chat-item-right {
        .nick-name {
            font-size: 12px;
        }

        .chat-msg {
            position: relative;
            max-width: 300px;
            padding: 8px;
            border-radius: 6px;
            background-color: #fff;
        }
    }

}

.triangle {
    position: absolute;
    display: inline-block;
    top: 6px;
    right: 0;
    transform: translateX(100%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    /* 较大的三角形 */
    border-bottom: 6px solid transparent;
    /* 较大的三角形 */
    border-left: 8px solid #fff;
    /* 较大的三角形 */
}
</style>